<!doctype html>
<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->
<html class="no-js" lang="en" >
    <head>
        <title>n3ctar - Casos</title>
        <?php include('html/head.html') ?>
    </head>
    <body>
        <?php include('html/top-nav.html') ?>
        <!-- casos section -->
        <section role="contentinfo" class="casos">
            <div class="row">
                <div class="large-8 columns large-centered">
                    <div>
                        <img src="img/casos.svg" alt="" />
                    </div>
                </div>
            </div>

            <!-- ISOTOPE -->
            <!-- FILTERS -->
            <div class="row">
                <div class="small-12">
                    <ul class="tags">
                        <li class="active todos" data-tag=" ">todos</li><!--
                        --><li data-tag="vivo">vivo</li><!--
                        --><li data-tag="web">web</li><!--
                        --><li data-tag="calle">calle</li><!--
                        --><li data-tag="cine">cine</li><!--
                        --><li data-tag="tv">tv</li><!--
                        --><li data-tag="teatro">teatro</li><!--
                        --><li data-tag="transporte">transporte</li><!--
                        --><li data-tag="escaparates">escaparates</li><!--
                        --><li data-tag="tecnologias">tecnolog&iacute;as</li>
                    </ul>
                </div>
            </div>
            <!-- END FILTERS -->
            <div class="row">
                <div class="small-12 columns">
                    <img src="img/loader.gif" class="loader" alt="" />
                </div>
            </div>
            <div id="container" class="has-load" style="">
                <a href="#arbol" class="item caso" data-label="vivo web calle" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/arbol.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>el &aacute;rbol de los deseos</p></div> 
                </a>
                <a href="#llamame" class="item caso" data-label="vivo calle escaparates tecnologias" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/llamame.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>ll&aacute;mame</p></div> 
                </a>
                <a href="#escaparates" class="item caso" data-label="vivo calle escaparates tecnologias" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/escaparates.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>escaparates</p></div> 
                </a>
                <a href="#joujou" class="item caso" data-label="vivo cine" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/joujou.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>joujoujou</p></div> 
                </a>
                <a href="#movicom" class="item caso" data-label="vivo cine" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/movicom.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>movicom</p></div> 
                </a>
                <a href="#ariel" class="item caso" data-label="vivo transporte" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/ariel.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>ariel</p></div> 
                </a>
                <a href="#paquito" class="item caso" data-label="vivo teatro" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/paquito.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>paquito</p></div> 
                </a>
                <a href="#invisibles" class="item caso" data-label="vivo calle transporte" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/invisibles.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>invisibles</p></div> 
                </a>
                <a href="#zarzuela" class="item caso" data-label="vivo web calle tv radio transporte" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/zarzuela.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>zarzuelapunk</p></div> 
                </a>
                <a href="#mefuidecasa" class="item caso" data-label="vivo web calle" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/mefuidecasa.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>me he ido de casa</p></div> 
                </a>
                <a href="#familias" class="item caso" data-label="vivo web calle transporte" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/familias.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>familiasalaescuela</p></div> 
                </a>
                <a href="#livesms" class="item caso" data-label="vivo calle tecnologias" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/livesms.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>live sms</p></div> 
                </a>
                <a href="#cabalgata" class="item caso" data-label="vivo calle" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/cabalgata.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>cabalgata</p></div> 
                </a>
                <a href="#lona" class="item caso" data-label="vivo calle tecnologias" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/lona.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>lona sensorial</p></div> 
                </a>
                <a href="#qualid" class="item caso" data-label="web" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/qualid.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>qualid</p></div> 
                </a>
                <a href="#juntines" class="item caso" data-label="web" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/juntines.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>juntines</p></div> 
                </a>
                <a href="#glee" class="item caso" data-label="vivo web" data-year="1991">
                    <div class="item-pic"><img src="img/content/home/glee.jpg" alt="" /></div>
                    <div class="item-zocalo"><p>glee</p></div> 
                </a>
            </div>
            <!-- END ISOTOPE -->
        </section>
        <!-- end casos section -->


        <?php include('html/footer.html') ?>
        <?php include('html/modal-casos.html') ?>

        <script src="https://d2jsycj2ly2vqh.cloudfront.net/web/buttons/js/flbuttons.min.js" type="text/javascript"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="js/foundation/foundation.js"></script>
        <script src="js/foundation/foundation.dropdown.js"></script>
        <script src="js/isotope.js"></script>
        <script src="js/main.js"></script>
        <script>
            $(document).foundation();
            function getURLParameter(name) {
                return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
            }
            
            // ISOTOPE INIT
            $(window).load(function(){
                $('#container').isotope({
                    // options
                    itemSelector: '.item',
                    layoutMode: 'masonry',
                    masonry: {
                        columnWidth: 240
                    }
                });
                var filterFromQuerystring = getURLParameter('tag');
                $('.tags li[data-tag="' + filterFromQuerystring  + '"]').click();
            });
            
            var allTags = [];
            $('.tags li:not(.todos)').each(function(){
                allTags.push($(this).data('tag'));
            });
            
            $(document).on('click', '.tags li:not(.todos, .disabled)', function(){
                
                $('.tags li.todos').removeClass('active');
                
                if($(this).hasClass('active')){ 
                    $(this).removeClass('active');
                    var tag = $(this).data('tag');
                    tags = jQuery.grep(tags, function(value) {
                        return value != tag;
                    });
                } else {
                    $(this).addClass('active');
                    var tag = $(this).data('tag');
                    tags.push(tag);
                }
                if(tags.length == 0){
                    $('.tags li.todos').addClass('active');
                };
                var data = [];
                $.each(tags, function( i, val ) {
                    data.push("[data-label*= '" + val + "']");
                });
                filter = data.join('');

                $('#container').isotope({ filter : filter});
                
                
                var availableTags = [];
                $('.caso:not(.isotope-hidden)').each(function(){
                    var labels = $(this).data('label').split(' ');
                    for( var key in labels ){
                        availableTags.push(labels[key]);
                    }
                });
                
                availableTags = availableTags.filter(function(elem, pos) {
                    return availableTags.indexOf(elem) == pos;
                });
                disabledTags =  $(allTags).not(availableTags).get();
                
                $('.tags li:not(.todos)').each(function(){
                    $(this).removeClass('disabled');
                    for( var key in disabledTags ){
                        if($(this).data('tag') == disabledTags[key]){
                            $(this).addClass('disabled');
                        }
                    }
                });
           });
            
            $('.tags li.todos').on('click', function(){
                $('.tags li:not(.todos)').removeClass('disabled');
                tags = []
                $('.tags li').removeClass('active');
                $(this).addClass('active');
                $('#container').isotope({ filter : ''});
            });
            
        </script>
    </body>
</html>